<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>

<head>
	<meta charset="UTF-8" />
	<title>绘制电子围栏</title>
	<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
</head>
<style type="text/css">
	#mapDiv{
		height:600px;
		margin: 10px;
		border: 1px solid #ccc;
	}
	.btn-wrap{
		position: absolute;
		right: 30px;
		top: 20px;
		z-index: 200;
	}
</style>


<body>
	<div id="mapDiv"></div>
	<div class = 'btn-wrap'>
		<input type="button" id="btn1" value="选择范围"/>
		<input type="button" id="btn2" value="清除所画"/>
		<input type="button" id="btn3" value="查看刚才画的"/>
		<input type="button" id="btn4" value="启动编辑" >
	</div>

	<script type="text/javascript">
	var PolygonPoints=[];  //保存所画坐标
	var polygonTool;//矩形工具
	var polygon; //画的矩形
    var mapclick="";//地图点击事件。
	//加载基本地图和导航
	function loadMap(){
		try {
            map = new TMap("mapDiv"); //初始化地图对象
            map.centerAndZoom(new TLngLat(119.256630,26.081300), 15);
        	map.enableHandleMouseScroll(); //允许鼠标双击放大地图   
        } catch(err) {
        	alert('图加载不成功，请稍候再试！你可以先使用其他功能！');
        }
    }
	//加载多边形测距工具。
	function loadPolygonTool(){
		var config = {
			strokeColor:"blue",	//折线颜色
			fillColor:"#FFFFFF",	//填充颜色。当参数为空时，折线覆盖物将没有填充效果
			strokeWeight:"3px",	//折线的宽度，以像素为单位
			strokeOpacity:0.5,	//折线的透明度，取值范围0 - 1
			fillOpacity:0.5,	//填充的透明度，取值范围0 - 1
			showLabel:false     //是否显示页面，默认为true.
		};
		//创建测面工具对象
		polygonTool = new TPolygonTool(map,config);
		//注册测面工具绘制完成后的事件
		TEvent.addListener(polygonTool,"draw",onDrawPolygon);
	}
	//关闭测面工具时触发
	function onDrawPolygon(bounds,line)
	{
		polygonTool.close();
		PolygonPoints.length=PolygonPoints.length-2;//最后双击会把最后一个坐标保存两次。
		TEvent.removeListener(mapclick);//关闭单击事件（保存坐标）
	}
	//绘制多边形
	function drawPolygon() {　
		polygonTool.clear();//清除所画的多边形
		map.clearOverLays();
		polygonTool.open();
		PolygonPoints.length=0;  //清零保存的坐标
		if(mapclick!=""){
			TEvent.removeListener(mapclick); //避免加载多次点击事件
		}
		mapclick = TEvent.addListener(map,"click",function(p){
			polygonTool.open();
			var lnglat = map.fromContainerPixelToLngLat(p);//获取点击处的坐标
			PolygonPoints.push(lnglat.getLng());
			PolygonPoints.push(lnglat.getLat());
			if(PolygonPoints.length>20){
				alert("不能超过10个点！请重新选择范围。");
				polygonTool.close();
				PolygonPoints.length=0;
				TEvent.removeListener(mapclick);
			}
		});
	}
	//根据已有坐标组来画一个多边形。
	function  drawPolygonByPoint(){　//根据点坐标来画多边形
		map.removeOverLay(polygon);
		var points = [];
		if(PolygonPoints.length!=0){
			for(var i=0;i<PolygonPoints.length;i=i+2){
				points.push(new TLngLat(PolygonPoints[i],PolygonPoints[i+1]));
			}
			//创建面对象
			polygon = new TPolygon(points,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5, fillOpacity:0.5});//向地图上添加面
			map.addOverLay(polygon);
		}else{
			alert("没有选择电子栅栏！");
		}
	}
	loadMap();
	loadPolygonTool();
	//给几个按钮添加点击事件。事件委托。
	$(".btn-wrap").click(function(event) {
		var target = event.target;
		var id = target.id;
		switch(id){
			case 'btn1':
			polygonTool.close();
			TEvent.removeListener(mapclick);
			drawPolygon();
			break;
			case 'btn2':
			polygonTool.close();
			TEvent.removeListener(mapclick);
			polygonTool.clear();
			map.clearOverLays()
			break;
			case 'btn3':
			polygonTool.close();
			TEvent.removeListener(mapclick);
			drawPolygonByPoint();
			break;
			case 'btn4':
			polygon.enableEdit();
		}
	});
</script>
</body>

</html>